Developers.IO CAFEで実現！Web / ネイティブ / LINEアプリをまとめる技術

Web / ネイティブ / LINEアプリをまとめる技術

少し前になりますが、弊社が運営するカフェ「Developers.IO CAFE」のエンジニア向け説明会を開催しました。

その中で、カフェで利用するアプリについて「Web / ネイティブ / LINEアプリをまとめる技術」として発表させていただきました。本記事では、その内容をお伝えしたいと思います。

下記の記事でも言及しているので、あわせてお読みいただけますと幸いです。

スライド

全体構成

全体構成としては下図のようになっています。

Developers.IO CAFEを利用するために、以下のチャネルでアプリを提供しています。

• Webブラウザから利用するWebアプリ
• LINEの友だち登録経由で利用するLIFFアプリ
• アプリをインストールして使うネイティブアプリ（iOS / Android）

このように複数のチャネルで提供している理由は、カフェに訪れるお客様に適している環境が異なるためです。ちょっと立ち寄った方であればWebアプリの方が良いし、LINEに慣れている方であればLIFFアプリの方がもっと良い。あるいは常連のお客様であればアプリをインストールしてもらった方が楽に利用できる、などです。

どの環境においても、認証にはAuth0、APIは同じAPIを参照しています（リクエストパラメータなどはチャネルごとに調整しています）。

Web / ネイティブ / LINEアプリで提供するまでの歴史

Web / ネイティブ / LINEアプリで提供することに至った経緯を解説します。

カフェの初期開発フローでは、iOSアプリ先行で開発していきAndroidアプリはiOSアプリを踏襲しながら作るような流れでした。

しかしながら実際にカフェを運営してみると、ネイティブアプリはインストールすることに障壁があることが分かりました。インストールの必要がない方法で提供する必要が出てきます。

そこで新規にVueアプリを開発しました。Web / ネイティブでそれぞれ提供する形に。

次にチャットボット注文を使った体験を作るべく、LINEチャットボットが登場します。

Web / ネイティブ / LINEでそれぞれ開発者が付く形になります。

ここまで行き着いた際に、アップデートがWeb / ネイティブ / LINEで揃えるのがコストがかかるという問題が発生します。さらに問題となるのがほぼ同じUIなのに全く違うコードになってしまう点です。同じような機能改善でも4倍のコストがかかるということで「まとめる」という解決策にたどり着くことになりました。

Vueアプリに統合したことで、開発者はVueアプリに専念できるようになりました。

UIフレームワーク「Ionic」

Web / ネイティブ / LINEのいずれの場合でも、ネイティブアプリのようなUIを使っているような感覚で利用してもらうべく、UIフレームワークに「Ionic」を利用しました。2019年5月にVueがサポートされたため、Ionic + Vueの構成で開発しています。

また、ネイティブアプリ化には「Capacitor」を利用しました。Capacitorを利用すると、Ionic製のアプリを簡単にネイティブアプリにラップできるほか、ネイティブAPIのブリッジも行うことができます。

最終的に以下のようなUIになっています。ヘッダーの表示有無などはチャネルごとに調整を行なっていますが、基本的なUI実装のコードは統一されています。

Auth0の良さ

Auth0は複雑になりがちなソーシャルログインなどの認証/認可を標準的な規格（OIDC/OAuth 2.0など）で丸っとまとめ上げることができるサービスです。

実際、Web / ネイティブ / LINEではそれぞれ適したログイン方法が異なります。例えばLINEアプリなのに電話番号登録があったら不自然です。クライアントごとに提供するログイン方法を出し分けたりすることが簡単にできるところがAuth0の素晴らしいところです。

まとめ

• ワンソース or 個別は、割ける開発コスト次第
• 各プラットフォームの専門知識は必要。
プロフェッショナルだからこそできる。
• 新しいツールやサービス、新機能を駆使して
顧客体験を最大化しよう

一緒に開発してみたい方はぜひクラスメソッドへ！

本記事で紹介した内容に留まらず、クラスメソッドでは新しい技術を使って新しい体験を創造する活動を積極的に行なっています。ご興味のある方はぜひご応募ください！